<template>
    <div v-transfer-dom>
        <popup v-model="hideTypeProp"
               width="100%"
               @on-hide="propHide">
            <!-- <header>
                <div class="search-wrap">
                    <input type="text"
                           placeholder="请输入关键字搜索">
                    <button></button>
                </div>
            </header> -->
            <div class="content-wrap">
                <noData v-if="theModel.length == 0"></noData>
                <ul v-for="(item,index) in theModel"
                    @click="selectedFn(item)"
                    :key="index"
                    class="newdepetlidt"
                    v-else>
                    <li>{{item.DeptName}}</li>
                </ul>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup, Icon } from 'vux'
export default {
    name: 'hideTypeProp',
    data () {
        return {
            hideTypeProp: false,
            theModel: [],
            userInfo: ''
        }
    },
    components: {
        Popup,
        Icon
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getData()
    },
    props: {
        selectHideType: {
            type: Function
        },
        hideTypePropShow: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        hideTypePropShow (newVal) {
            this.hideTypeProp = newVal
        }
    },
    methods: {
        checkedFn (item) {
            this.$set(item, 'checked', !item.checked)
        },
        propHide () {
            this.$parent.hideTypePropShow = false
        },
        selectedFn (item) {
            this.selectHideType(item)
        },
        getData () {
            let params = {
                'allowPaging': false,
                'business': 'FetchHiddenDangerStandards',
                'data': {
                    'ProjectId': this.userInfo.deptid
                },
                'tokenId': this.userInfo.tokenId,
                'userId': this.userInfo.userId
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    this.theModel = res.data.data
                }
            }).catch(() => {

            })
        }
    }
}
</script>
<style scoped>
header {
    line-height: 40px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.1);
}
header .search-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #666;
    height: 36px;
    border-radius: 18px;
    padding-left: 18px;
}
header input {
    flex: 1;
    height: 34px;
}
header button {
    width: 34px;
    height: 34px;
    background: url(../../../static/images/s_03.png) no-repeat center;
    background-size: 28px 28px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}
.content-wrap {
    height: 100%;
    overflow-y: scroll;
}
li {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
</style>
